<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>前端测试页面</title>  
    <style>  
        /* 在这里添加CSS样式 */  
        body {  
            font-family: Arial, sans-serif;  
            display: flex;  
            justify-content: center;  
            align-items: center;  
            height: 100vh;  
            background-color: #f0f0f0;  
            margin: 0;  
        }  
        .container {  
            text-align: center;  
            padding: 20px;  
            background-color: white;  
            border-radius: 8px;  
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);  
        }  
        button {  
            padding: 10px 20px;  
            font-size: 16px;  
            cursor: pointer;  
            background-color: #007BFF;  
            color: white;  
            border: none;  
            border-radius: 4px;  
        }  
        button:hover {  
            background-color: #0056b3;  
        }  
    </style>  
</head>  
<body>  
  
<div class="container">  
    <h1>前端测试页面</h1>  
    <p>这是一个简单的测试页面，用于展示HTML、CSS和JavaScript的结合。</p>  
    <button id="testButton">点击我</button>  
  
    <p id="result"></p>  
</div>  
  
<script>  
    // 在这里添加JavaScript代码  
    document.getElementById('testButton').addEventListener('click', function() {  
        var resultElement = document.getElementById('result');  
        resultElement.textContent = '按钮已被点击！';  
        // 可以在这里添加更多逻辑  
    });  
</script>  
  
</body>  
</html>